<script lang="ts" setup>
import pic9 from '../imgs/testimonials/askbonus.png';
import pic8 from '../imgs/testimonials/bitpunter.png';
import pic7 from '../imgs/testimonials/c.png';
import pic2 from '../imgs/testimonials/cryptogamble.png';
import pic1 from '../imgs/testimonials/earnbitmoon.png';
import pic5 from '../imgs/testimonials/gamble.png';
import pic6 from '../imgs/testimonials/kryptocasino.png';
import pic3 from '../imgs/testimonials/multicoins.png';
import pic4 from '../imgs/testimonials/valentino.png';

const listInfo = [
  { img: pic1, linkHref: 'earnbitmoon.club', linkName: 'Coin Platform', quote: `  "G9.Game is much more than just a casino. Crypto boxes, staking, farming, dividends, lots of entertainment and opportunities in one place. I've never seen anything like G9.Game."` },
  { img: pic2, linkHref: 'cryptogamble.tips', linkName: 'Crypto Gambling Website', quote: ` "G9.Game is the ultimate gambling experience in the crypto world. Find exclusive games, thousands of slot machines, and feel the casino directly from your home. Join G9.Game, become an ambassador, and get paid for referring your friends - their team is ready to help you with your marketing activities"` },
  { img: pic3, linkHref: 'multicoins', linkName: 'Earn your crypto ', quote: `"G9.Game is a famous platform that has something to offer everyone. If you like cryptocurrencies, I recommend going through the whole G9.Game concept in detail so that you don't miss this great thing."` },
  //
  { img: pic4, linkHref: 'Valentino Rocco', linkName: 'Crypto Influencer/Youtuber ', quote: `"G9.Game.com is a fantastic betting site and casino. By holding the BFG crypto you are entitled to dividends from the platform. This makes the users not ordinary players, as if a small part of the casino is their own. Then you can also get a cashback of up to 25%. Long life to G9.Game"` },
  { img: pic5, linkHref: 'Gamble.io', linkName: 'Gambling Reviews ', quote: `"Gamble.io is happy to be promoting G9.Game Casino. With an exceptional gaming platform that offers casino games, sports, and much more, G9.Game is everything a crypto player is looking for. We are looking forward for the best results together and really glad to have a great relationship with our Affiliate Manager. Lara"` },
  { img: pic6, linkHref: 'Kryptocasinos', linkName: 'Crypto Reviews Websites', quote: `"We love to work with G9.Game, because they are one of the few casinos, that are true to the crypto mission and really understand the crypto customers."` },
  //
  { img: pic7, linkHref: 'David Criptomonedas', linkName: 'Streamer/Influencer ', quote: `"G9.Game has been a before and after for me. It is my top 1 strategy in my cryptocurrency investments. The daily staking that I receive thanks to the BFG token makes it the best casino I have ever tried."` },
  { img: pic8, linkHref: 'Bit Punter', linkName: 'Gambling Reviews', quote: `"G9.Game is the right address for exciting games as well as attractive promotions. Here at Bitpunter, we are confident to recommend them to our players and  happy to have them as our partner."` },
  { img: pic9, linkHref: 'AskBonus', linkName: 'Online casino bonuses review platform (affiliate)', quote: `"We cannot say anything but good about G9.Game Affiliates. They also offer one of the most promising brands with an exclusive promotion. We are excited to see what the future holds for our collaboration"` },
];

const swipe = ref<any>(null);
const breakpoints = computed(() => {
  return {
    375: {
      slidesPerView: 1,
      slidesPerGroup: 1,
    },
    768: {
      slidesPerView: 3,
      slidesPerGroup: 3,
    },
  };
});
function pre() {
  swipe.value?.prev?.();
}
function next() {
  swipe.value?.next?.();
}
</script>

<template>
  <div class="mb-20 lt-tablet:mb-16">
    <div class="container">
      <div class="testimonials-head">
        <h1 class="m-0 text-8 font-700 lt-tablet:text-center">
          Testimonials
        </h1>
        <div class="">
          <span class="banner-icon swiper-button-prev absolute right-20 top-0 z-2 lt-tablet:(bottom-40% left-4 right-auto top-auto)" @click="pre()">
            <i class="i-ri:arrow-left-s-line text-6" />
          </span>
          <span class="banner-icon swiper-button-next absolute right-10 top-0 z-2 lt-tablet:(bottom-40% right-4 top-auto)" @click="next()">
            <i class="i-ri:arrow-right-s-line text-6" />
          </span>
        </div>
      </div>

      <swiper-container
        ref="swipe"
        :navigation="{ extEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }"
        class="swiper_game swiper-cover__game-container"
        :freeMode="true"
        :freeModeSticky="true"
        reeModeMomentumRatio="0.3"
        :grabCursor="true"
        :breakpoints="breakpoints"
        :passiveListeners="true"
        :preventClicks="true"
      >
        <swiper-slide v-for="(item, index) in listInfo" :key="index" class="flex flex-col items-center">
          <li class="splide-slide" role="group">
            <div class="testimonial">
              <div class="items-center px-4 pb-5.5 pt-4 text-center">
                <img :src="item.img" class="mb-2 w-60.5">
                <div>
                  <div class="flex-center">
                    <i class="i-solar:global-linear mr-2 text-sys-text-body" />
                    <span class="text-3 font-500 !text-brand-500">{{ item.linkHref }}</span>
                  </div>
                  <span class="mt-1 text-2.5 text-sys-text-body">{{ item.linkName }}</span>
                </div>
              </div>
              <div class="bg-sys-layer-d px-4 py-5.5">
                <p class="h-30 text-ellipsis text-center text-3 font-500 leading-normal">
                  {{ item.quote }}
                </p>
              </div>
            </div>
          </li>
        </swiper-slide>
      </swiper-container>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.testimonials-head {
  --uno: 'grid grid-cols-[1fr_auto] mb-6 gap-4 lt-tablet:(mb-6 gap-0)';
}
.splide-slide {
  --uno: 'mx-4 w-full';
  .testimonial {
    --uno: 'flex flex-col bg-sys-layer-a rounded-4 h-full overflow-hidden';
  }
}
.swiper_game.swiper-cover__game-container swiper-slide {
  --uno: 'lt-tablet:p-0';
}

.banner-icon {
  --uno: 'rounded-2  bg-sys-layer-e p-1 lt-tablet:(border-(1 #848A9D solid))';
  i {
    --uno: 'text-sys-text-head';
  }
}

.swiper-button-disabled {
  --uno: 'bg-sys-layer-d';
  i {
    --uno: '!text-sys-text-body';
  }
}
</style>
